<template>
    <section class="village-change">
        <div class="cadreList">
            <div  style="flex:1">
                <div class="topCard">
                    <el-card style="height:100%;text-align: left" class="titleCard">
                        <p style="color: white;font-size: 20px;margin-top:-5px;">村干部登记办理</p>
                        <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">基本信息</a>
                    </el-card>
                </div>
                <el-card class="content" v-loading="positionListLoading">
                    <div style="display: flex" class="operateDiv">
                        <div style="flex: 2;text-align: left" v-if="user.sysDistrict.districtLevel==3">
                            <vs-button color="success" type="gradient" style="width: 70px" @click="handlePostAdd('新增')">添加</vs-button>
                            <!-- <vs-button color="warning" type="gradient" style="width: 70px" @click="handlePost('编辑')">编辑</vs-button>
                            <vs-button color="danger" type="gradient" style="width: 70px" @click="handlePost('删除')">删除</vs-button> -->
                        </div>
                        <div v-if="user.sysDistrict.districtLevel===1" class="searchSelect" style="flex: 1;text-align: right">
                            <el-select v-model="townDistrictId" clearable filterable placeholder="请选择所属镇党委"
                                       :popper-append-to-body="false" popper-class="select-popper" @change="queryChange()" >
                                <el-option
                                    v-for="item in townList"
                                    :key="item.districtId"
                                    :label="item.districtName"
                                    :value="item.districtId">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div v-if="addedList.length">
                      <div v-for="(item, index) in addedList" :key="index" >
                        <div class="detail" :class="`task_item `" >
                            <div class="detail_item" >
                              <div class="detailLabel">
                                  <!-- <span class="detailLabel">名称:</span> -->
                                  <p style="margin-bottom: 2px;font-size: 15px">{{item.name}}</p>
                                  <p :title="handlePost(item.cadresPost)" style="font-size: 14px; color:rgb(162 162 162);overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 160px">{{handlePost(item.cadresPost)}}</p>
                              </div>
                              <div class="detailLabel">
                                  <!-- <span class="detailLabel">镇级组织:</span> -->
                                  <span>{{item.parentDistrictName}}</span>
                              </div>
                              <div class="detailLabel">
                                  <!-- <span class="detailLabel">村级组织:</span> -->
                                  <span>{{item.districtName}}</span>
                              </div>
                              <div class="detailLabel">
                                <!-- <span title="佐证材料" class="el-icon-document"></span> -->
                                <FileUpload title="佐证材料" :value="item.postMaterials" :limit="1" :disabled="true" @getValue="item.postMaterials = $event" style="width: 80px; height: 30px;line-height: normal;margin-top: 10px" class="file_btn"></FileUpload>
                              </div>
                              <div class="detailLabel">
                                <el-tag size="large" style="text-align: center" v-if="item.statue === '-1'" close-transition type="danger"  effect="dark">被驳回</el-tag>
                                <el-tag size="large" style="text-align: center" v-if="item.statue === '0'" close-transition type="danger"  effect="dark">待镇党委审核</el-tag>
                                <el-tag size="large" style="text-align: center" v-else-if="item.statue === '1'" close-transition  type="warning"  effect="dark">待市委审核</el-tag>
                                <el-tag size="large" style="text-align: center" v-else-if="item.statue === '2'" close-transition  type="primary"  effect="dark">待村完善信息</el-tag>
                                <el-tag size="large" style="text-align: center" v-else-if="item.statue === '3'" close-transition  type="success"  effect="dark">待镇党委审核</el-tag>
                                <el-tag size="large" style="text-align: center" v-else-if="item.statue === '4'" close-transition  type="success"  effect="dark">待市委审核</el-tag>
                              </div>
                              <div class="detailLabel">
                                <el-button size="small" style="text-align: center" @click="showCheckDialog(item, 'error')" v-if="item.statue === '-1' && user.roleCode == 'COUNTRY_SIDE_ACTOR'" close-transition type="primary"  effect="dark">修改</el-button>
                                <el-button size="small" style="text-align: center" @click="showCheckDialog(item)" v-if="item.statue === '0' && user.roleCode == 'TOWN_REVIEWER'" close-transition type="primary"  effect="dark">审核</el-button>
                                <el-button size="small" style="text-align: center" @click="showCheckDialog(item)" v-else-if="item.statue === '1' && user.roleCode == 'CITY_LEADER'" close-transition  type="primary" effect="dark">审核</el-button>
                                <el-button size="small" style="text-align: center" @click="showCheckDialog(item, 'edit')" v-else-if="item.statue === '2' && user.roleCode == 'COUNTRY_SIDE_ACTOR'" close-transition  type="primary" effect="dark">编辑</el-button>
                                <el-button size="small" style="text-align: center" @click="showCheckDialog(item, 'check')" v-else-if="item.statue === '3' && user.roleCode == 'COUNTRY_SIDE_ACTOR'" close-transition  type="primary" effect="dark">查看</el-button>
                                <el-button size="small" style="text-align: center" @click="showCheckDialog(item,'audit')" v-else-if="item.statue === '3' && user.roleCode == 'TOWN_REVIEWER'" close-transition  type="primary" effect="dark">审核</el-button>
                                <el-button size="small" style="text-align: center" @click="showCheckDialog(item,'audit')" v-else-if="item.statue === '4' && user.roleCode == 'CITY_LEADER'" close-transition  type="primary" effect="dark">审核</el-button>
                              </div>
                            </div>
                        </div>
                      </div>
                      <el-pagination style="text-align: right;overflow: scroll;" background
                                     small
                                     :pager-count="5"
                                     :page-size="8"
                                     :total="retiredPageable.total" :current-page.sync="retiredPageable.currentPage"
                                     :page-size.sync="retiredPageable.pageSize"
                                     @current-change="currentChange(value, 'add')" @size-change="sizeChange"
                                     layout="total, prev, pager, next">
                      </el-pagination>
                    </div>
                    <div v-else class="nolist_image"><el-image src="static/img/csj/noList.png"></el-image></div>
                    <!-- <div style="display: flex;" v-if="positionList.length>0">
                        <div style="flex:1;">
                            <div style="min-height: 500px;">
                                <div v-for="(item,index) in positionList" class="positionItem"  @click="handleSelected(item,index)">
                                    <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                    <el-col :span="16">
                                        <icon name="position-icon" scale="3.5" class="position-icon"></icon>
                                        <span class="position-label">
                                        <p>{{item.name.replace(/支部/g,'')}}</p>
                                        <p class="town-label">{{item.parentDistrictName ? item.parentDistrictName.replace(/党委/g, '') : ' '}}</p>
                                    </span>
                                    </el-col>
                                    <el-col :span="8">
                                        <p class="no-person">暂无任职人员</p>
                                    </el-col>
                                </div>
                            </div>
                            <el-pagination style="text-align: right;overflow: scroll;" background
                                           small
                                           :pager-count="5"
                                           :page-size="8"
                                           :total="pageable.total" :current-page.sync="pageable.currentPage"
                                           :page-size.sync="pageable.pageSize"
                                           @current-change="currentChange" @size-change="sizeChange"
                                           layout="total, prev, pager, next">
                            </el-pagination>
                        </div>
                        <div class="position-right el-card">
                            <h4>岗位信息</h4>
                            <div class="position-info">
                                <div class="property-item">
                                    <span class="label">岗位名称：</span>
                                    <span class="value">{{form.name}}</span>
                                </div>
                                <div class="property-item">
                                    <span class="label">镇级组织：</span>
                                    <span class="value">{{form.parentDistrictName}}</span>
                                </div>
                                <div class="property-item">
                                    <span class="label">村级组织：</span>
                                    <span class="value">{{form.districtName}}</span>
                                </div>
                                <div class="property-item">
                                    <span class="label">职位类型：</span>
                                    <span class="value">{{form.name}}</span>
                                </div>
                            </div>
                            <h4>任职信息</h4>
                            <div class="position-info">
                                <el-form :model="form" :rules="rules"  ref="form" label-width="90px" inline>
                                    <el-form-item label="任职人员" prop="cadreName" >
                                        <el-select v-model="form.cadreName" placeholder="请选择或新任任职人员" size="mini"
                                                   filterable allow-create @change="handleName">
                                            <el-option
                                                v-for="item in villageCadresList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.name">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="任职附件" prop="appointmentAnnex" class="property-form-item">
                                        <FileUpload :value="form.appointmentAnnex" :disabled="false" @getValue="form.appointmentAnnex = $event" style="width: 150px;"></FileUpload>
                                    </el-form-item>
                                    <el-form-item label="输入密码" prop="password" class="property-form-item">
                                        <el-input v-model="form.password" type="password"></el-input>
                                    </el-form-item>
                                    <el-form-item label="  " class="property-form-item">
                                        <el-button type="primary" size="small" icon="el-icon-document-checked" :loading="submitLoad" @click="submitOffice('form')">确认新任</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                    <div v-else>暂无数据</div> -->
                </el-card>
            </div>
            <div  style="flex:1">
                <div class="topCard">
                    <el-card style="height:100%;text-align: left" class="titleCard">
                        <p style="color: white;font-size: 20px;margin-top:-5px;">村干部离任办理</p>
                        <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">基本信息</a>
                    </el-card>
                </div>
                <el-card class="content" v-loading="cadreListLoading">
                    <div class="operateDiv">
                        <div v-if="user.sysDistrict.districtLevel===1" class="searchSelect" style="text-align: right;">
                            <el-select v-model="cadreDistrictId" clearable filterable placeholder="请选择所属镇党委"
                                       :popper-append-to-body="false" popper-class="select-popper" @change="queryChange('cadre')">
                                <el-option
                                    v-for="item in townList"
                                    :key="item.districtId"
                                    :label="item.districtName"
                                    :value="item.districtId">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div v-if="user.roleCode == 'COUNTRY_SIDE_ACTOR'">
                      <div style="display: flex" v-if="leaveList.length>0">
                          <div style="flex:1;" >
                              <div style="min-height: 500px">
                                  <div v-for="(item,index) in leaveList"  :class="cadreIndexActive==index ? 'cadreItemActive':'cadreItem'"  @click="handleSelected(item,index,'cadre')">
                                      <!-- <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label> -->
                                      <el-col :span="16">
                                          <icon name="position-icon" scale="3.5" class="position-icon"></icon>
                                          <span class="position-label">
                                          <p>{{item.name.replace(/支部/g,'')}}</p>
                                          <p class="town-label">{{item.parentDistrictName ? item.parentDistrictName.replace(/党委/g, '') : ' '}}</p>
                                      </span>
                                      </el-col>
                                      <el-col :span="8">
                                          <p class="no-person">{{item.cadreName}}</p>
                                      </el-col>
                                  </div>
                              </div>
                              <el-pagination style="text-align: right;overflow: scroll" background
                                            small
                                            :pager-count="5"
                                            :page-size="8"
                                            :total="cadrePageable.total" :current-page.sync="cadrePageable.currentPage"
                                            :page-size.sync="cadrePageable.pageSize"
                                            @current-change="(value) => {currentChange(value, 'cadre')}" @size-change="sizeChange"
                                            layout="total, prev, pager, next">
                              </el-pagination>
                          </div>
                          <div class="position-right el-card" :class="cadreIndexActive==0 ? 'position-right-radius':'position-right'">
                              <h4>岗位信息</h4>
                              <div class="position-info">
                                  <div class="property-item">
                                      <span class="label">岗位名称：</span>
                                      <span class="value">{{handlePost(leaveForm.cadresPost)}}</span>
                                  </div>
                                  <div class="property-item">
                                      <span class="label">镇级组织：</span>
                                      <span class="value">{{leaveForm.parentDistrictName}}</span>
                                  </div>
                                  <div class="property-item">
                                      <span class="label">村级组织：</span>
                                      <span class="value">{{leaveForm.districtName}}</span>
                                  </div>
                                  <div class="property-item">
                                      <span class="label">职位类型：</span>
                                      <span class="value">村干部</span>
                                  </div>
                              </div>
                              <h4>离任信息</h4>
                              <div class="position-info" v-if="!checkResultList.length || checkResultList[0].statue == '-1'">
                                  <el-form :model="leaveForm" :rules="leaveRules"  ref="leaveForm" label-width="90px" inline>
                                      <el-form-item label="任职人员" prop="cadreName" class="property-form-item">
                                          <el-input v-model="leaveForm.name" disabled></el-input>
                                      </el-form-item>
                                      <el-form-item label="离任附件" prop="termFile" class="property-form-item">
                                          <FileUpload :value="leaveForm.termFile" :disabled="false" @getValue="leaveForm.termFile = $event" style="width: 150px;"></FileUpload>
                                      </el-form-item>
                                      <!-- <el-form-item label="输入密码" prop="password" class="property-form-item">
                                          <el-input v-model="leaveForm.password" type="password"></el-input>
                                      </el-form-item> -->
                                      <el-form-item label="  " class="property-form-item">
                                          <el-button type="primary" size="small" icon="el-icon-document-checked" :loading="leaveSubmitLoad" @click="leaveOffice('leaveForm')">确认离任</el-button>
                                      </el-form-item>
                                  </el-form>
                                  <div v-if="checkResultList.length && checkResultList[0].statue == '-1'">
                                    <div class="property-item">
                                          <span class="label">审核人：</span>
                                          <span class="value">{{checkResult.people}}</span>
                                    </div>
                                    <div class="property-item">
                                          <span class="label">审核意见：</span>
                                          <span class="value">{{checkResult.suggestion}}</span>
                                    </div>
                                  </div>
                              </div>
                              <div class="position-info" v-else-if="checkResultList.length || checkResultList[0].statue == '-1'">
                                <div class="property-item">
                                      <span class="label">审核人：</span>
                                      <span class="value">{{checkResult.people}}</span>
                                </div>
                                <div class="property-item">
                                      <span class="label">审核意见：</span>
                                      <span class="value">{{checkResult.suggestion}}</span>
                                </div>
                              </div>
                          </div>
                      </div>
                      <div v-else class="nolist_image"><el-image src="static/img/csj/noList.png"></el-image></div>
                    </div>
                    <div v-else>
                      <div v-if="LeaveList2.length">
                        <div v-for="(item, index) in LeaveList2" :key="index" >
                          <div class="detail" :class="`task_item`" >
                              <div class="detail_item" >
                                <div class="detailLabel">
                                    <!-- <span class="detailLabel">名称:</span> -->
                                    <p style="margin-bottom: 2px;font-size: 15px">{{item.cadresName}}</p>
                                    <p :title="handlePost(item.cadresPost)" style="font-size: 14px; color:rgb(162 162 162);overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 160px">{{handlePost(item.cadresPost)}}</p>
                                </div>
                                <div class="detailLabel">
                                    <!-- <span class="detailLabel">镇级组织:</span> -->
                                    <span>{{item.parentDistrictName}}</span>
                                </div>
                                <div class="detailLabel">
                                    <!-- <span class="detailLabel">村级组织:</span> -->
                                    <span>{{item.districtName}}</span>
                                </div>
                                <div class="detailLabel">
                                  <!-- <span title="佐证材料" class="el-icon-document"></span> -->
                                  <FileUpload title="佐证材料" :value="item.postMaterials" :limit="1" :disabled="true" @getValue="item.postMaterials = $event" style="width: 80px; height: 30px;line-height: normal;margin-top: 10px" class="file_btn"></FileUpload>
                                </div>
                                <div class="detailLabel">
                                  <el-tag size="large" style="text-align: center" v-if="item.statue === '-1'" close-transition type="danger"  effect="dark">被驳回</el-tag>
                                  <el-tag size="large" style="text-align: center" v-if="item.statue === '0'" close-transition type="danger"  effect="dark">待镇党委审核</el-tag>
                                  <el-tag size="large" style="text-align: center" v-else-if="item.statue === '1'" close-transition  type="warning"  effect="dark">待市委审核</el-tag>
                                </div>
                                <div class="detailLabel">
                                  <el-button size="small" style="text-align: center" @click="showChecLeavekDialog(item)" v-if="item.statue === '-1' && user.roleCode == 'COUNTRY_SIDE_ACTOR'" close-transition type="primary"  effect="dark">修改</el-button>
                                  <el-button size="small" style="text-align: center" @click="showChecLeavekDialog(item)" v-if="item.statue === '0' && user.roleCode == 'TOWN_REVIEWER'" close-transition type="primary"  effect="dark">审核</el-button>
                                  <el-button size="small" style="text-align: center" @click="showChecLeavekDialog(item)" v-else-if="item.statue === '1' && user.roleCode == 'CITY_LEADER'" close-transition  type="primary" effect="dark">审核</el-button>
                                </div>
                              </div>
                          </div>
                        </div>
                        <el-pagination style="text-align: right;overflow: scroll;" background
                                      small
                                      :pager-count="5"
                                      :page-size="8"
                                      :total="LeaveList2Pageable.total" :current-page.sync="LeaveList2Pageable.currentPage"
                                      :page-size.sync="LeaveList2Pageable.pageSize"
                                      @current-change="currentChange(value, 'add')" @size-change="sizeChange"
                                      layout="total, prev, pager, next">
                        </el-pagination>
                      </div>
                      <div v-else class="nolist_image"><el-image src="static/img/csj/noList.png"></el-image></div>
                    </div>
                </el-card>
            </div>
        </div>
        <div>
            <div>
                <div class="topCard">
                    <el-card style="height:100%;text-align: left" class="titleCard">
                        <p style="color: white;font-size: 20px;margin-top:-5px;">离任村干部列表</p>
                        <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">基本信息</a>
                    </el-card>
                </div>
                <el-card v-loading="retiredLoading" class="content">
                    <div class="operateDiv">
                        <div style="text-align: right;margin: 20px 44px 20px 0" class="searchSelect" v-if="user.sysDistrict.districtLevel===1">
                            <el-select v-model="retiredDistrictId" clearable filterable placeholder="请选择所属镇"
                                       :popper-append-to-body="false" popper-class="select-popper" @change="queryChange('retired')">
                                <el-option
                                    v-for="item in townList"
                                    :key="item.districtId"
                                    :label="item.districtName"
                                    :value="item.districtId">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div v-if="cadreRetiredList.length>0">
                        <div v-for="(item,index) in cadreRetiredList" class="retiredItem"  @click="handleSelected(item,index,'retired')">
                            <div>
                                <el-col :span="5" style="text-align: center">
                                    <span>所属组织:&nbsp;&nbsp;&nbsp;&nbsp;{{item.districtName.indexOf('支部')>-1?item.districtName.replace(/支部/,''):item.districtName}}</span>
                                </el-col>
                                <el-col :span="5" style="text-align: center">
                                    <span>姓名:&nbsp;&nbsp;&nbsp;&nbsp;{{item.cadresName}}</span>
                                </el-col>
                                <el-col :span="5" style="text-align: center">
                                    <span>任职时间:&nbsp;&nbsp;&nbsp;&nbsp;{{item.appointmentTime}}</span>
                                </el-col>
                                <el-col :span="5" style="text-align: center">
                                    <span>离职时间:&nbsp;&nbsp;&nbsp;&nbsp;{{item.departureTime}}</span>
                                </el-col>
                                <el-col :span="2" style="text-align: center">
                                    <el-button type="danger" @click="delCadre(item.id)">删除</el-button>
                                </el-col>
                            </div>
                        </div>
                        <el-pagination style="text-align: right;margin-right: 70px;" background
                                       small
                                       :pager-count="5"
                                       :page-size="8"
                                       :total="retiredPageable.total" :current-page.sync="retiredPageable.currentPage"
                                       :page-size.sync="retiredPageable.pageSize"
                                       @current-change="(value) => {currentChange(value, 'retired')}" @size-change="(value) => sizeChange(value, 'retired')"
                                       layout="total, prev, pager, next">
                        </el-pagination>
                    </div>
                    <div v-else>暂无数据</div>
                </el-card>
            </div>
        </div>
        <el-dialog
            v-if="dialogVisible"
            :title="diaTitle"
            :visible.sync="dialogVisible"
            width="580px"
            align="left"
            :modal-append-to-body='false'
            :append-to-body="true"
            :before-close="handleClose">
            <el-form  :model="postForm" :rules="postRules" ref="postForm" class="demo-form-inline" label-width="170px" >
                <el-form-item label="名称" prop="name">
                    <el-input v-model="postForm.name" :disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="岗位" prop="cadresPost">
                    <!-- <el-select v-model="postForm.cadresPost" placeholder="请选择" size="mini">
                        <el-option
                            v-for="item in postOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select> -->
                    <el-select v-model="cadresPostList" placeholder="请选择" filterable multiple @change="handlePostSelect()" size="mini">
                        <el-option v-for="item in postOptions"  :value="item.value" :label="item.label" :key="item.value" >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任职附件" prop="postMaterials" class="property-form-item">
                    <FileUpload :value="postForm.postMaterials" :limit="1" :disabled="false" @getValue="postForm.postMaterials = $event" style="width: 100px;height: 27px;line-height: 27px" class="file_btn"></FileUpload>
                </el-form-item>
                <!-- <el-form-item label="组织" prop="districtId">
                    <el-cascader
                        v-model="postDistrictId"
                        :options="formSelectList"
                        :props="{value: 'districtId',label: 'districtName',children: 'orgChildren'}"
                        @change="districtChange"></el-cascader>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer footer-position">
                <el-button type="primary" :loading="submitLoading" @click="submit(postForm)">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog
          title="审核"
          :visible.sync="checkVisible"
          width="50%"
          append-to-body>
          <el-row style="margin-top: 5px">
            <el-col :span="2">
                &nbsp;
            </el-col>
            <el-col :span="8" style="text-align: left;padding-top: 20px">
                <el-form :model="reviewForm" ref="reviewForm" label-width="80px" :rules="reviewRules">
                    <el-form-item label="审核人" prop="auditor">
                        <el-input v-model="reviewForm.auditor"></el-input>
                    </el-form-item>
                    <el-form-item label="审核意见" prop="auditAdvice">
                        <el-input v-model="reviewForm.auditAdvice" type="textarea" :rows="2"></el-input>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" :loading="confirmLoading" @click="reviewConfirm('SUCCESS')">通过</el-button>
                        <el-button type="danger" :loading="confirmLoading" @click="reviewConfirm('FAILED')">驳回</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="14">
                &nbsp;
            </el-col>
          </el-row>
        </el-dialog>
        <el-dialog
          title="编辑"
          :visible.sync="editVisible"
          width="90%"
          append-to-body>
            <AddedVillageEdit :loading="currentItemLoading" v-if="currentDetail" :currentItem="currentItem" :currentSecretary="currentDetail"></AddedVillageEdit>
        </el-dialog>
        <el-dialog
          title="审核"
          :visible.sync="verifyVisible"
          width="90%"
          append-to-body>
            <AddedVillageVerify :loading="currentItemLoading" v-if="currentDetail" :currentItem="currentItem" :currentSecretary="currentDetail"></AddedVillageVerify>
        </el-dialog>
    </section>
</template>

<script>
    import AddedVillageEdit from '@/components/village/AddedVillageEdit';
    import AddedVillageVerify from '@/components/village/AddedVillageVerify';
    import FileUpload from '@/components/FileUpLoad';
    import md5 from '@/utils/md5';
    import LookUp from '@/lookup';
    export default {
        name: "VillageChange",
        data(){
            return{
                user:{},
                addedList: [],
                leaveList: [],
                submitLoad:false,//新任提交按钮load
                form:{},//新任表单
                selected:'',//选中
                cadreIndexActive: 0,
                checkVisible: false,
                confirmLoading: false,
                currentItem: {},
                reviewForm: {
                  auditor: '',
                  auditAdvice: ''
                },
                reviewRules:{
                    auditor: [
                        { required: true, message: '审核人不能为空', trigger: 'blur' }
                    ],
                    auditAdvice: [
                        { required: true, message: '审核意见不能为空', trigger: 'blur' }
                    ]
                },
                rules:{
                    cadreName: [
                        { required: true, trigger: 'blur', message: '请输入任职人员'},
                    ],
                    appointmentAnnex: [
                        {required: true, validator: (rule, value, callback) => {
                                if (!this.form[rule.field]) {
                                    callback(new Error('请上传任命文件！'));
                                } else {
                                    callback();
                                    return true;
                                }
                            }, trigger: 'change'},
                    ],
                    password: [
                        { required: true, trigger: 'blur', message: '请输入密码'},
                    ],
                },
                leaveRules:{
                    termFile: [
                        {required: true, validator: (rule, value, callback) => {
                                if (!this.leaveForm[rule.field]) {
                                    callback(new Error('请上传任命文件！'));
                                } else {
                                    callback();
                                    return true;
                                }
                            }, trigger: 'change'},
                    ],
                    // password: [
                    //     { required: true, trigger: 'blur', message: '请输入密码'},
                    // ],
                },
                positionList:[],//第一个列表
                cadreList: [],//第二个列表
                cadreRetiredList: [],//第三个列表
                positionUrl: '/identity/cadrePosition/isExist',
                leaveCadreUrl:'/identity/villageCadresTerm',
                pageable: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 8,
                },
                cadrePageable: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 8,
                },
                retiredPageable: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 8,
                },
                LeaveList2Pageable: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 8,
                },
                positionListLoading: false,
                cadreListLoading:false,
                retiredLoading: false,
                townDistrictId: '',
                cadreDistrictId:'',
                retiredDistrictId: '',
                townList: [],
                formSelectList:[],
                leaveForm:{},
                postPath:'',
                cadrePath:'',
                retiredPath:'',
                retiredSelected:'',
                leaveSelected:'',
                leaveSubmitLoad:false,
                dialogVisible:false,
                diaTitle:'',
                postForm:{},
                postRules:{
                    name: [
                        { required: true, trigger: 'blur', message: '请输入岗位名称'},
                    ],
                    cadresPost:[
                        { required: true, trigger: 'blur', message: '请选择岗位'}
                    ],
                    postMaterials:[
                        {required: true, validator: (rule, value, callback) => {
                          console.log(this.postForm[rule.field],'this.postForm[rule.field]');
                          console.log(this.postForm);
                                if (!this.postForm[rule.field]) {
                                    callback(new Error('请上传任命文件！'));
                                } else {
                                    callback();
                                    return true;
                                }
                            }, trigger: 'change'},
                    ]
                },
                submitLoading:false,
                postOptions:LookUp['Post'].filter(item => item.value),
                disabled:false,
                postDistrictId:[],
                villageCadresList:[],//任职人员
                isEdit: Boolean,
                cadresPostList: [],
                checkResultList: [],
                checkResult: {},
                LeaveList2: [],
                LeaveList2Loading:false,
                checkType: '',
                editVisible: false,
                verifyVisible: false,
                currentItemLoading: false,
                currentDetail: ''
            }
        },
        methods:{
            handleName(val){
                let temp = this.villageCadresList.filter(item=>item.name==val)[0];
                this.form.cadresId = temp ? temp.id : '';
            },
            handlePostAdd(type){
              this.$http('GET', `identity/villageCadresAddTemporary/hasFull/${this.user.districtId}`, false).then(res => {
                console.log(res,'res');
                if (res.res) {
                  this.dialogVisible = true;
                  this.diaTitle = type;
                } else {
                  this.$confirm('村干部额定数量已满, 无法新增！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  })
                }
              })
            },
            handleClose () {
                this.postForm = {};
                this.cadresPostList = []
                this.postDistrictId = [];
                this.dialogVisible = false;
            },
            districtChange(value){
                this.postForm.districtId = value[value.length-1];
                this.postForm.parentDistrictId = value[value.length-1].substring(0,4);
            },
            submit(postForm){
                this.$refs.postForm.validate((valid) => {
                    if (valid) {
                        postForm.statue = '0'
                        postForm.districtName = this.user.sysDistrict.districtName
                        postForm.districtId = this.user.sysDistrict.districtId
                        postForm.parentDistrictName = this.user.sysDistrict.parentName
                        postForm.parentDistrictId = this.user.sysDistrict.orgParent
                        console.log(postForm, 'postForm');
                        this.submitLoading = true;
                        let path;
                        let query;
                        if (this.diaTitle == '修改') {
                          path = `identity/villageCadresAddTemporary/${postForm.id}id`
                          query = 'PUT'
                        } else {
                          path = `identity/villageCadresAddTemporary/`
                          query = 'POST'
                        }
                        this.$http(query, path,postForm,false).then(res => {
                          this.submitLoading = false;
                          this.postForm = {};
                          this.cadresPostList = []
                          this.dialogVisible = false;
                          this.$message({
                              type: "success",
                              message: '提交申请成功！'
                          })
                          this.loadAddedList('/identity/villageCadresAddTemporary/page?page=0&size=8')
                        })
                        // let ajaxType = 'POST';
                        // let url = `identity/cadrePosition/`;
                        // if(this.postForm.id){
                        //     ajaxType = 'PUT';
                        //     url=`identity/cadrePosition/${this.postForm.id}id`
                        // }
                        // this.$http(ajaxType,url,this.postForm,true).then(data=>{
                        //     this.submitLoading = false;
                        //     this.postForm = {};
                        //     this.postDistrictId = [];
                        //     this.dialogVisible = false;
                        //     this.loadPosition(this.postPath);
                        // })
                    }
                });
            },
            loadAddedList(path){
              this.positionListLoading = true
              let param = {}
                param = {
                  districtId: this.user.sysDistrict.districtId
                }
              this.$http('POST', path,param,false).then(res => {
                this.addedList = res.content
                console.log(res.totalElements, 'list');
                this.retiredPageable.total = res.totalElements;
                this.positionListLoading = false
              })
            },
            loadLeaveList(path){
              this.cadreListLoading = true;
              this.$http('POST', path,{districtId: this.user.sysDistrict.districtId,cadresType: "IN_SECRETARY",hasRetire: "0"},false).then(res => {
                this.leaveList = res.content
                console.log(res, 'list');
                if (this.leaveList.length > 0) {
                    Object.assign(this.leaveForm, this.leaveList[0])
                    this.cadrePageable.total = res.totalElements;
                }
                this.cadreListLoading = false;
              })
            },
            loadLeaveList2(path){
              this.LeaveList2Loading = true
              let param = {}
                param = {
                  districtId: this.user.sysDistrict.districtId
                }
              this.$http('POST', path,param,false).then(res => {
                this.LeaveList2 = res.content
                console.log(res.totalElements, 'list');
                this.LeaveList2Pageable.total = res.totalElements;
                this.LeaveList2tLoading = false
              })
            },
            showCheckDialog(item, value) {
              console.log(item,'itemitem');
              this.checkType = 'addValue'
              if (value == 'error') {
                this.cadresPostList = [];
                if(item.cadresPost){
                    this.cadresPostList = item.cadresPost.split(",");
                }
                this.diaTitle = '修改'
                this.dialogVisible = true
                console.log(item,'-----------');
                this.postForm = item
              }else if (value == 'edit' || value == 'check') {
                this.editVisible = true;
                this.currentDetail = ''
                this.currentItemLoading = true
                this.currentItem = item
                this.$http('GET', `identity/villageCadres/${item.cadresId}id`,false).then(res => {
                  // console.log(res, '+++++++++++++++++++');
                  if (res.villageCadresTemporaryes.length > 0) {
                    this.currentDetail = res.villageCadresTemporaryes[0].cadresInfo
                  } else {
                    this.currentDetail = JSON.stringify(res)
                  }
                  // console.log(this.currentDetail,'this.currentDetail');
                  this.currentItemLoading = false
                })
                console.log(item, 'item');
              }else if (value == 'audit') {
                this.verifyVisible = true;
                this.currentDetail = ''
                this.currentItemLoading = true
                this.currentItem = item
                this.$http('GET', `identity/villageCadres/${item.cadresId}id`,false).then(res => {
                  // console.log(res, '+++++++++++++++++++');
                  if (res.villageCadresTemporaryes.length > 0) {
                    this.currentDetail = res.villageCadresTemporaryes[0].cadresInfo
                  } else {
                    this.currentDetail = JSON.stringify(res)
                  }
                  // console.log(this.currentDetail,'this.currentDetail');
                  this.currentItemLoading = false
                })
                console.log(item, 'item');
              } else {
                this.checkVisible = true;
                this.currentItem = item
                this.$nextTick(function () {
                  this.$refs['reviewForm'].resetFields();
                })
              }
            },
            showChecLeavekDialog(item){
              this.checkType = 'leaveValue'
              this.checkVisible = true;
              this.currentItem = item
              this.$nextTick(function () {
                this.$refs['reviewForm'].resetFields();
              })
            },
            reviewConfirm(value) {
              this.$refs['reviewForm'].validate(async (valid) => {
                if(valid) {
                  this.confirmLoading = true;
                  this.contentLoad = true;
                  let param = {}
                  param = this.currentItem;
                  if (this.user.roleCode == 'TOWN_REVIEWER') {
                    param.town = this.reviewForm.auditor;
                    param.townSuggestion = this.reviewForm.auditAdvice;
                    param.statue = value == "SUCCESS" ? parseFloat(this.currentItem.statue) + 1 : '-1';
                  } else if (this.user.roleCode == 'CITY_LEADER') {
                    param.city = this.reviewForm.auditor;
                    param.citySuggestion = this.reviewForm.auditAdvice;
                    param.statue = value == "SUCCESS" ? parseFloat(this.currentItem.statue) + 1 : '-1';
                  }
                  console.log(param, 'param');
                  if (this.checkType == 'leaveValue') {
                    await this.$http("PUT", `/identity/villageCadresTermTemporary/${this.currentItem.id}id`,param, false);
                    this.$message({
                        type: 'success',
                        message: value == "SUCCESS" ? '审核成功！' : '驳回成功！'
                    })
                    this.loadLeaveList2('/identity/villageCadresTermTemporary/page?page=0&size=8')
                  } else if (this.checkType == 'addValue') {
                    await this.$http("PUT", `/identity/villageCadresAddTemporary/${this.currentItem.id}id`,param, false);
                    this.$message({
                        type: 'success',
                        message: value == "SUCCESS" ? '审核成功！' : '驳回成功！'
                    })
                    this.loadAddedList('/identity/villageCadresAddTemporary/page?page=0&size=8')
                  }
                  // this.$emit('refreshConfirmList');
                  // await this.loadAllTaskObject();
                  this.confirmLoading = false;
                  this.contentLoad = false
                  this.checkVisible = false
                }
              })
            },
            updataDetail(){

            },
            currentChange(value, type) {
                let path;
                if(type==='add'){
                    this.retiredPageable.currentPage = value;
                    path = `identity/villageCadresAddTemporary/page?page=${value - 1}&size=8`;
                    this.loadAddedList(path)
                }else if(type==='cadre'){
                    this.cadrePageable.currentPage = value;
                    path = `identity/villageCadres/page?page=${value - 1}&size=8`;
                    this.loadLeaveList(path)
                }else{
                    this.pageable.currentPage = value;
                    path = `${this.positionUrl}/page?page=${value - 1}&size=8`;
                }
                // this.loadPosition(path, type);
            },
            sizeChange(value, type) {
                /* let path = `${this.positionUrl}/page?page=0&size=8`;
                 this.loadPosition(path, type)*/
            },
            queryChange(type){
                let path;
                if(type==='retired'){
                    this.retiredPageable.currentPage = 1;
                    path = `${this.leaveCadreUrl}/page?page=0&size=8`;
                }else if(type==='cadre'){
                    this.cadrePageable.currentPage = 1;
                    path = `${this.positionUrl}/page?page=0&size=8`;
                }else{
                    this.pageable.currentPage = 1;
                    path = `${this.positionUrl}/page?page=0&size=8`;
                }
                this.loadPosition(path, type);
            },
            initCadreTableStyle(type){
                let initClassName = '';
                if(type==='cadre'){
                    initClassName = 'cadreItem';
                }else if(type==='retired'){
                    initClassName = 'retiredItem';
                }else{
                    initClassName = 'positionItem';
                }
                let arr = document.getElementsByClassName(initClassName+'Active');
                for(let i=0;i<arr.length;i++){
                    arr[i].className=initClassName;
                };
            },

            handleSelected(item,index,type){
                let currentClass = '';
                if(type==='cadre'){
                    console.log(item);
                    this.cadreIndexActive = index;
                    this.leaveForm =  Object.assign({termFile: ''}, item);
                    this.leaveSelected = item;
                    this.$http('POST',`identity/villageCadresTermTemporary/list`,{cadresId: item.id},false).then(res => {
                      console.log(res,'wwwwwwwwwwww');
                      this.checkResult = {}
                      this.checkResultList = res
                      if (res.length) {
                        if (res[0].city) {
                          this.checkResult.people = res[0].city
                          this.checkResult.suggestion = res[0].citySuggestion
                        } else {
                          this.checkResult.people = res[0].town
                          this.checkResult.suggestion = res[0].townSuggestion
                        }
                      }
                      console.log(this.checkResult, 'this.checkResult');
                    })
                }else if(type==='retired'){
                    this.cadreRetiredIndexActive = index;
                    this.retiredSelected = item;
                }else{
                    currentClass = 'positionItem';
                    if(item === this.selected ){
                        document.getElementsByClassName(currentClass+'Active')[0].className=currentClass;
                        this.form = {appointmentAnnex:''};
                        this.selected = '';
                        this.villageCadresList = [];
                    }else{
                        this.form = Object.assign({}, item);
                        this.selected = item;
                        this.$http('POST',`identity/villageCadres/list`,{districtId: this.selected.districtId, cadresType: 'IN_SECRETARY'},false).then(data=>{
                            this.villageCadresList = data;
                        });
                        this.initCadreTableStyle();
                        document.getElementsByClassName(currentClass)[index].className = currentClass+'Active';
                    }
                }
            },

            leaveOffice(form){
                if (!this.leaveForm.districtId) {
                    this.$message({
                        type: 'warning',
                        message: '请选择一个村干部！'
                    });
                    return;
                }
                this.$refs.leaveForm.validate((valid) => {
                    if (valid) {
                      console.log(this.leaveForm,'this.leaveForm');
                      let param = {
                        cadresName: this.leaveForm.name,
                        cadresId: this.leaveForm.id,
                        statue: '0',
                        districtName: this.leaveForm.districtName,
                        parentDistrictName: this.leaveForm.parentDistrictName,
                        districtId: this.leaveForm.districtId,
                        parentDistrictId: this.leaveForm.parentDistrictId,
                        termMaterials: this.leaveForm.termFile,
                        cadresPost: this.leaveForm.cadresPost,
                      }
                      this.$http('POST',`identity/villageCadresTermTemporary/`, param, false).then(data=>{
                          this.leaveSubmitLoad = false;
                          this.leaveForm = {};
                          this.leaveSelected = '';
                          this.loadLeaveList('/identity/villageCadres/page?page=0&size=8')
                          // this.loadPosition(this.postPath);
                          // this.loadPosition(this.cadrePath,'cadre');
                          // this.loadPosition(this.retiredPath,"retired");
                          this.$message({
                              type: 'success',
                              message:'离任成功！'
                          });
                          this.handleSelected(this.leaveList[0], 0, 'cadre')
                      }).catch(() => {
                          this.leaveSubmitLoad = false;
                      });
                      // console.log();
                        // let userName = sessionStorage.getItem("user");
                        // this.$http('POST', `/identity/sysUser/list`, {userName:userName,password:md5.hex_md5(this.leaveForm.password)}, false).then(data=>{
                        //     if(data.length == 0){
                        //         this.$message({
                        //             message:'密码输入错误',
                        //             type:'warning'
                        //         });
                        //         return null;
                        //     }else{
                        //         this.leaveSubmitLoad = true;
                        //         let param = {
                        //             cadresId: this.leaveForm.cadreId,
                        //             termFile: this.leaveForm.termFile,
                        //             positionId: this.leaveForm.id
                        //         };
                        //         this.$http('POST',`identity/villageCadres/departure`, param, false).then(data=>{
                        //             this.leaveSubmitLoad = false;
                        //             this.leaveForm = {};
                        //             this.leaveSelected = '';
                        //             this.loadPosition(this.postPath);
                        //             this.loadPosition(this.cadrePath,'cadre');
                        //             this.loadPosition(this.retiredPath,"retired");
                        //             this.$message({
                        //                 type: 'success',
                        //                 message:'离任成功！'
                        //             });
                        //         }).catch(() => {
                        //             this.leaveSubmitLoad = false;
                        //         });
                        //     }
                        // });
                    }
                });
            },
            submitOffice(form){
                if (!this.form.districtId) {
                    this.$message({
                        type: 'warning',
                        message: '请选择一个村干部岗位！'
                    });
                    return;
                }
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let userName = sessionStorage.getItem("user");
                        this.$http('POST', `/identity/sysUser/list`, {userName:userName,password:md5.hex_md5(this.form.password)}, false).then(data=>{
                            if(data.length == 0){
                                this.$message({
                                    message:'密码输入错误',
                                    type:'warning'
                                })
                                return null;
                            }else{
                                this.submitLoad = true;
                                let newCadre = {
                                    positionId:this.form.id,
                                    districtId:this.form.districtId,
                                    parentDistrictName:this.form.parentDistrictName,
                                    districtName:this.form.districtName,
                                    name:this.form.cadreName,
                                    cadresId:this.form.cadresId,
                                    cadresType: this.form.post,
                                    hasRetire: "0",
                                    appointmentAnnex:this.form.appointmentAnnex,
                                    headSculpture: 'http://122.97.218.162:8888/g1/M00/00/B2/rBAAx151x-6AbVcSAAAJJXxlLy0086.png'
                                };
                                this.$http('POST',`identity/villageCadres/addBaseInfo`,newCadre,false).then(data=>{
                                    this.submitLoad = false;
                                    this.form = {appointmentAnnex:''};
                                    this.selected = '';
                                    this.loadPosition(this.postPath);
                                    this.loadPosition(this.cadrePath,'cadre');
                                    this.$message({
                                        type: 'success',
                                        message: '任职成功'
                                    });
                                }).catch(() => {
                                    this.submitLoad = false;
                                });
                            }
                        });
                    }
                });
            },
            loadPosition(path, type) {
                this.form = {appointmentAnnex:''}//清除当前选中的行数据
                this.leaveForm = {appointmentAnnex:''};
                if(this.user.sysDistrict.districtLevel>1){
                    this.retiredDistrictId = this.user.districtId;
                    this.cadreDistrictId = this.user.districtId;
                    this.townDistrictId = this.user.districtId;
                }
                let param = {districtId:this.user.districtId};
                if (type === 'retired') {
                    param.cadresType= 'IN_SECRETARY';
                    param.hasRetire = '-1';
                    this.retiredLoading = true;
                    param.districtId = this.retiredDistrictId;
                } else if(type=== 'cadre'){
                    param.post='IN_SECRETARY';
                    param.isExist = '1';
                    this.cadreListLoading = true;
                    param.districtId = this.cadreDistrictId;
                }else {
                    param.post='IN_SECRETARY';
                    param.isExist = '0';
                    this.positionListLoading = true;
                    param.districtId = this.townDistrictId;
                }
                this.$http('POST', path, param, false).then(
                    data => {
                        this.initCadreTableStyle(type);
                        if (type === 'retired') {
                            // this.cadreRetiredList = data.content;
                            // this.retiredPageable.total = data.totalElements;
                            // this.retiredLoading = false;
                        }else if (type === 'cadre') {
                            this.cadreList = data.content;
                            if (this.cadreList.length > 0) {
                                this.leaveForm = this.cadreList[0];
                            }
                            this.cadrePageable.total = data.totalElements;
                            this.cadreListLoading = false;
                        }else {
                            this.positionList = data.content;
                            if (this.positionList.length > 0) {
                                this.form = this.positionList[0];
                            }
                            this.pageable.total = data.totalElements;
                            this.positionListLoading = false;
                        }
                    }
                ).catch( _ => {
                    this.positionListLoading = false;
                    this.retiredLoading = false;
                    this.cadreListLoading = false;
                });
            },
            loadTown() {
                this.$http('POST', `identity/sysDistrict/list`, {districtType: 'Party', districtLevel: '2'}, false).then(data => {
                    this.townList = data;
                });
                let towns = JSON.parse(sessionStorage.getItem('towns'));
                if(this.user.sysDistrict.districtLevel==1){
                    this.formSelectList = towns;
                }else if(this.user.sysDistrict.districtLevel==2){
                    this.formSelectList = towns.filter(item=>item.districtId === this.user.districtId)[0];
                }
            },
            async delCadre(id) {
                await this.$http("DELETE",`identity/villageCadresTerm/${id}id`, false);
                this.loadPosition(this.retiredPath,"retired");
                this.$message({
                    type: "success",
                    message: '删除成功'
                })
            },
            handlePost(value){
                if(value){
                    let endValue = [];
                    if(value.indexOf(',')>0){
                        let arr = value.split(',');
                        arr.forEach(item=>{
                            endValue.push(LookUp['Post'].filter(sub=>sub.value===item)[0].label);
                        })
                    }else{
                        endValue.push(LookUp['Post'].filter(sub=>sub.value===value)[0].label);
                    }
                    return endValue.join('、');
                }else{
                    return '暂无'
                }
            },
            handlePostSelect(){
                this.postForm.cadresPost = this.cadresPostList.join(',');
            },
        },
        components:{
            FileUpload,
            AddedVillageEdit,
            AddedVillageVerify
        },
        mounted() {
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem('userInfo'));
            this.loadTown();
            this.loadAddedList('/identity/villageCadresAddTemporary/page?page=0&size=8')
            this.loadLeaveList2('/identity/villageCadresTermTemporary/page?page=0&size=8')
            this.loadLeaveList('/identity/villageCadres/page?page=0&size=8')
            this.postPath = `${this.positionUrl}/page?page=0&size=8`;
            this.loadPosition(this.postPath);
            this.cadrePath  = `${this.positionUrl}/page?page=0&size=8`;
            this.loadPosition(this.cadrePath,'cadre');
            this.retiredPath = `${this.leaveCadreUrl}/page?page=0&size=8`;
            this.loadPosition(this.retiredPath,"retired");
        }
    }
</script>

<style scoped lang="scss">
    .village-change .cadreList{
        display: flex;
    }
    .village-change .topCard {
        width: 90%;
        margin: 20px auto;
        height: 80px;
        position: relative;
        z-index: 10;
    }
    .village-change .titleCard {
        background: linear-gradient(60deg, #66aabb, #43a047);
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
    }
    .village-change .content {
        margin: -60px 15px 15px 15px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        padding: 15px;
        height: 750px;
    }
    .village-change .cadreItem{
        height: 50px;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #EBEEF5;
        background: #FFF;
        text-align: left;
        border-radius: 5px;
        margin: 0 0px 10px 0;
        font-weight: bold;
        position: relative;
        overflow: hidden;
        z-index: 999;
        opacity: 0.4;
        font-size:16px;
        font-family:Microsoft YaHei UI;
        color:rgba(57,57,57,1);
    }
    .village-change .cadreItem:hover{
        // transform: scale(1.1);
        // background: #f4f6f9;
        cursor: pointer;
    }
    .village-change .task_item {
      display: flex;
      margin: 20px 0 0 0;
      height: 50px;
      // line-height: 50px;
      font-size: 15px;
      border-radius: 5px;
      background-color: #fff;
      border: 1px solid #DFDFDF;
      cursor: pointer;
      transition: all .4s;
      font-weight: bold;
      color: rgba(107, 107, 112, 0.85);
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      // .el-col {
      //   height: 50px;
      // }
      .detailLabel {
        .el-upload--text {
          display: none;
        }
        .el-tag {
          height: 35px;
          line-height: 35px;
          font-size: 15px!important ;
        }
      }
    }
    .village-change .detail_item div {
      line-height: 50px;
      // width: 120px;
      flex: 1;
      text-align: center;
    }
    .village-change .detail_item .detailLabel:first-child {
      line-height: normal;
      padding-top: 3px!important;
      width: 160px!important;
      text-align: left;
    }
    .village-change {
      .task_item:hover {
        transform:translate(0,-5px);
        background-color: #a6eaf538;
        cursor: pointer;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
      .detail_item {
        width: 100%;
        margin-left: 15px;
        margin-right: 15px;
      }
      .detail {
        clear: both;
        position: relative;
        z-index: 999;
        flex: 1;
        text-align: left;
        z-index: 999;
        .detail_item {
          display: flex;
          div {
            padding: 0 10px;
            p {
              margin: 0;
              padding: 0;
            }
          }
        }
      }
      // .detail span {
      //   font-weight: 700;
      // }
      // .detail .detail_item div span:nth-child(1) {
      //   font-weight: normal;
      // }
    }
    .village-change .positionItem{
        height: 50px;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #EBEEF5;
        background: #FFF;
        font-size: 15px;
        text-align: left;
        border-radius: 5px;
        margin: 0 20px 10px 0;
        font-weight: bold;
        padding-left: 20px;
        color:rgba(107,107,112,0.85);
        position: relative;
        overflow: hidden;
    }
    // .village-change .self-define {
    //     position: absolute;
    //     right: -15px;
    //     top: -6px;
    //     width: 40px;
    //     height: 24px;
    //     background: #13ce66;
    //     text-align: center;
    //     -webkit-transform: rotate(45deg);
    //     transform: rotate(45deg);
    //     -webkit-box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
    //     box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
    //     display: none;
    // }
    // .village-change .self-define i {
    //     color: white;
    //     transform: rotate(-45deg);
    //     top: 9px;
    //     left: 0;
    //     font-weight: 700;
    //     position: relative;
    // }
    .village-change .positionItem:hover{
        background: #f4f6f9;
        transform: scale(1.1);
        cursor: pointer;
    }
    .village-change .positionItem:hover .self-define, .village-change .positionItemActive .self-define,
    .village-change .cadreItem:hover .self-define, .village-change .cadreItemActive .self-define{
        display: block;
    }

    .village-change .retiredItem{
        width: 90%;
        height: 50px;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #EBEEF5;
        background: #FFF;
        line-height: 50px;
        font-size: 16px;
        text-align: left;
        border-radius: 5px;
        margin: 20px auto;
        font-weight: bold;
        padding-left: 20px;
        color:rgba(107,107,112,0.85)
    }
    .village-change .retiredItem:hover{
        transform: scale(1.03);
        background: #6692F0;
        color:#fff;
        cursor: pointer;
    }
    .village-change .retiredItemActive{
        width: 90%;
        height: 50px;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #EBEEF5;
        background: #6692F0;
        line-height: 50px;
        font-size: 16px;
        text-align: left;
        border-radius: 5px;
        margin: 10px 5%;
        font-weight: bold;
        padding-left: 20px;
        color: #fff;
        cursor: pointer;
    }
    .village-change .operateDiv{
        height: 45px;
        margin: 20px 5px 10px 5px;
    }

</style>

<style rel="stylesheet/scss" lang="scss">
    /*下拉项背景*/
    .village-change {
        .el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
            line-height: 26px !important;
        }
        .el-card__body {
            padding: 20px 10px !important;
        }
        .searchSelect{
            .el-select {
                .el-input__inner {
                    background: linear-gradient(60deg, #66aabb, #43a047) !important;
                    color: white;
                    font-weight: bold;
                }
            }
        }

        .select-popper {
            background: linear-gradient(60deg, #66aabb, #43a047) !important;
            border-radius: 5px;
        }
        .el-popper[x-placement^=bottom] {
            .popper__arrow::after {
                border-bottom-color: #50a472;
            }
        }
        .searchSelect{
            .el-input {
                input::-webkit-input-placeholder {
                    color: rgba(255, 255, 255, .86);
                }
            }
        }

        .el-select {
            width: 150px !important;
            .el-input {
                .el-select__caret {
                    color: white;
                }
            }
        }
        .el-select-dropdown__item {
            color: white;
            text-align: left;
            &:hover {
                background-color: rgba(146, 184, 249, 0.15);
                margin-right: 1px;
                color: white;
            }
            &.hover {
                background-color: rgba(146, 184, 249, 0.15);
                margin-right: 1px;
                color: white;
            }
        }
        .el-input--mini {
            .el-input__inner {
                width: 150px !important;
            }
        }
        .el-form-item--mini {
            .el-form-item__error {
                padding-left: 0px;
            }
        }
        .el-pagination.is-background {
            .btn-next, .btn-prev, .el-pager li {
                margin: 0 4px;
                background-color: #f4f4f5;
                color: #606266;
                min-width: 22px;
                border-radius: 2px;
            }
        }
        .rightOut {
            .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
                -webkit-box-shadow: none!important;
                box-shadow: none!important;
            }
            .el-card {
                border: none;
            }
            .el-card__body{
                padding: 0!important;
            }
        }
        .position-icon {
            margin: 8px;
            vertical-align: top;
        }
        .position-label {
            display: inline-block;
            padding: 4px 0;
            line-height: 20px;
            .town-label {
                font-size: 14px;
                color: #b6b6b6;
            }
        }
        .positionItemActive{
            height: 50px;
            transition: .3s;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            border: 1px solid #EBEEF5;
            background: #f4f6f9;
            font-size: 15px;
            text-align: left;
            border-radius: 5px;
            margin: 0 20px 10px 0;
            font-weight: bold;
            padding-left: 20px;
            cursor: pointer;
            color: rgba(107,107,112,0.85);
            position: relative;
            overflow: hidden;
        }
        .cadreItemActive {
            height: 50px;
            background: #fff;;
            font-size: 15px;
            text-align: left;
            margin: 0 -1px 10px 0;
            font-weight: bold;
            cursor: pointer;
            color: rgba(107,107,112,0.85);
            position: relative;
            overflow: hidden;
            border:1px solid rgba(69, 160, 77, 1);
            /*box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.1);*/
            border-right: 0px;
            z-index: 1000;
            border-radius: 4px 0px 0px 4px;
        }
        .no-person {
            line-height: 50px;
        }
        .position-right {
            flex-basis: 360px;
            padding: 10px;
            padding-left: 30px;
            padding-top: 13px;
            h4 {
                text-align: left;
            }
            .position-info {
                padding: 0px 0;
                font-size: 14px;
                text-align: left;
                .property-item {
                    margin: 20px;
                    margin-left: 0;
                    .label {
                        color: #aaaaaa;
                    }
                }
                .property-form-item {
                    color: #aaaaaa;
                    margin-left: 0;
                    margin-top: 11px;
                    .el-button [class*=el-icon-]+span {
                        vertical-align: text-top;
                    }
                }
            }
            background:#fff;
            border:1px solid rgba(69, 160, 77, 1);
            box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.1);
            border-radius:4px;
        }
        .position-right-radius {
            border-radius:0 4px 4px 4px;
        }
    }
</style>
<style lang="scss">
  .detailLabel {
    .el-upload--text {
      display: none!important;
    }
    .el-upload-list__item-status-label {
      display: none!important;
    }
  }
</style>
